@use "sass:math";
$design_width: 1920; //设计稿的宽度，根据实际项目调整
$design_height: 1080; //设计稿的高度，根据实际项目调整
@function px2rem($px) {
  $design_font_size: 14;
  @return math.div($px, $design_font_size) + rem;
}
@function px2vw($px) {
  @return math.div(100, $design_width) * $px + vw;
}
@function px2vh($px) {
  @return math.div(100, $design_height) * $px + vh;
}
* {
  margin: 0;
  padding: 0;
  font-family: PingFangSC-Light, 微软雅黑;
}
.dasghboard-container {
  width: 100vw;
  height: 100vh;
  color: #333;
  background: url("../assets/dashboard/bg-assistor.png") no-repeat;
  background-size: 100% 100%;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

/*header开始*/
.header {
  width: 100%;
  height: px2vh(70);
}
.bg_header {
  width: 100%;
  height: 100px;
  background: url(../assets/dashboard/top.png) no-repeat;
  background-size: 100% 100%;
}
.t_time {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: px2vh(16);
  line-height: px2vh(90);
  color: #fff;
}
.t_operation {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: px2vh(16);
  line-height: px2vh(90);
  color: #fff;
}
/*content 开始*/

.data_content {
  padding-left: px2vw(20);
  padding-right: px2vw(20);
  padding-bottom: px2vh(10);
  margin-top: -#{px2vh(10)};
}
.box-dashboard-card {
  width: 100%;
  margin-top: px2vh(15);
  border: 1px solid #316ea9;
  position: relative;
  box-shadow: 0 0 px2vh(10) #295993;
}
.box-dashboard-card-title {
  height: px2vh(50);
  padding-left: px2vw(20);
  background-color: rgb(45 87 144 / 30%);
}
.box-dashboard-card-title span {
  padding-left: px2vw(10);
  display: inline-block;
  text-align: center;
  color: #6fb4da;
  line-height: px2vh(50);
  font-size: px2vh(20);
}

.box-dashboard-card-content {
  text-align: center;
}
.box-dashboard-card-content-row {
  padding: px2vh(20);
}

.l_t_line {
  width: px2vw(5);
  height: px2vh(24);
  left: -#{px2vw(3)};
  top: -#{px2vh(3)};
}
.t_l_line {
  height: px2vh(5);
  width: px2vw(26);
  left: -#{px2vw(3)};
  top: -#{px2vh(3)};
}
.t_line_box {
  position: absolute;
  width: 100%;
  height: 100%;
}
.t_line_box i {
  background-color: #3ecbdd;
  box-shadow: 0 0 10px #2db8cb;
  position: absolute;
}
.t_r_line {
  height: px2vh(3);
  width: px2vw(30);
  right: -#{px2vw(3)};
  top: -#{px2vh(3)};
}
.r_t_line {
  width: px2vw(3);
  height: px2vh(30);
  right: -#{px2vw(3)};
  top: -#{px2vh(3)};
}
.l_b_line {
  width: px2vw(3);
  height: px2vh(30);
  left: -#{px2vw(3)};
  bottom: -#{px2vh(3)};
}
.b_l_line {
  height: px2vh(3);
  width: px2vw(30);
  left: -#{px2vw(3)};
  bottom: -#{px2vh(3)};
}
.r_b_line {
  width: px2vw(3);
  height: px2vh(30);
  right: -#{px2vw(3)};
  bottom: -#{px2vh(3)};
}
.b_r_line {
  height: px2vh(3);
  width: px2vw(30);
  right: -#{px2vw(3)};
  bottom: -#{px2vh(3)};
}

.box-list {
  padding: px2vh(20) px2vw(20) px2vh(20) px2vw(20);
}
.box-list-item {
  background: url(../assets/dashboard/1.png) no-repeat;
  height: px2vh(50);
  margin-top: px2vh(15);
  line-height: px2vh(60);
  color: #fff;
}
.box-list-item-top {
  display: inline-block;
  position: absolute;
  line-height: px2vh(40);
  margin-left: px2vw(25);
  font-size: px2vh(25);
}
.box-list-item-content {
  display: inline-block;
  margin-left: px2vw(60);
  font-size: px2vh(16);
  color: #c8dbf3;
}
.box-list-item-footer {
  display: inline-block;
  font-size: px2vh(30);
  font-weight: bolder;
  position: absolute;
  left: 35%;
}
.active {
  background-image: linear-gradient(to top, #f8fca2, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wage-box {
  width: 100%;
  margin-top: px2vh(15);
  height: px2vh(90);
  border: 2px solid #0c1c6c;
  position: relative;
  text-align: center;
  box-shadow: inset 0 0 px2vh(20) #08155f;
}
.wage-box-num {
  font-size: px2vh(25);
  line-height: px2vh(50);
}
.wage-box-title {
  font-size: px2vh(14);
  line-height: px2vh(20);
}
.blue-wage {
  color: #06c3eb;
}
.blue-wage2 {
  color: #24d2ad;
}
.yellow-wage {
  color: #fbd525;
}
.green-wage {
  color: #cff824;
}
.green-wage2 {
  color: #adf27b;
}
.green-wage3 {
  color: #0ee276;
}
.red-wage {
  color: #f94d4c;
}
.orange-wage {
  color: #fd7100;
}

.warning-box {
  width: 100%;
  height: px2vh(300);
  overflow: hidden;
  text-align: left;
}
.warning-box span {
  margin-left: px2vw(15);
  margin-right: px2vw(10);
}
.warning-box ul:first-child {
  padding-left: px2vw(15);
  padding-right: px2vw(15);
  animation: roll-top 6s linear infinite;
  display: list-item;
  position: relative;
}
.warning-box ul li {
  border-bottom: 1px #316ea9 dashed;
  line-height: px2vh(35);
  color: #f3f4f6;
  font-size: px2vh(16);
}

.warning-box ul:last-child {
  padding-left: px2vw(15);
  padding-right: px2vw(15);
  animation: roll-top 6s linear infinite;
  display: list-item;
  position: relative;
}
.statistics-box {
  width: 100%;
  height: px2vh(200);
}
.statistics-box-row {
  margin-left: px2vw(15);
  margin-right: px2vw(15);
}
.statistics-box-number {
  text-align: center;
  font-size: px2vh(25);
  line-height: px2vh(50);
}
.statistics-box-image {
  height: px2vh(180);
}
.checkin-box {
  height: px2vh(200);
  padding-top: px2vh(10);
}
.checkin-box .attendance {
  font-size: px2vh(25);
  left: px2vw(75);
  top: px2vh(288);
  position: absolute;
}
.checkin-box .attendance-text {
  color: #fcfcfc;
  font-size: px2vh(25);
  margin-top: px2vh(40);
}
.checkin-box .absence {
  font-size: px2vh(25);
  left: px2vw(330);
  top: px2vh(288);
  position: absolute;
}
.checkin-box .absence-text {
  color: #fcfcfc;
  font-size: px2vh(20);
  margin-top: px2vh(40);
}
.map_box_title {
  font-size: px2vh(20);
  font-weight: bolder;
  color: #ffffff;
}
.map_box_content {
  padding-top: px2vh(15);
}
.map_box_content span {
  background-color: #5584f4;
  width: px2vw(30);
  height: px2vh(40);
  margin-right: px2vw(5);
  display: inline-block;
  color: #ffffff;
  line-height: px2vh(40);
  font-size: px2vh(25);
  text-align: center;
}

.map-tool-tips {
  width: px2vw(180);
  height: px2vh(140);
  right: 30%;
  position: absolute;
  background-color: rgba(27, 74, 146, 0.3);
}
.map-tool-tips-title {
  text-align: left;
  padding-left: px2vw(20);
  padding-top: px2vh(5);
  line-height: px2vh(25);
  color: #55a4e6;
}
.map-tool-tips-content {
  text-align: left;
  padding-left: px2vw(20);
  letter-spacing: px2vh(3);
  line-height: px2vh(25);
  color: #ffffff;
}

.box-dashboard-card-tips {
  display: none;
  width: px2vw(180) !important;
  height: px2vh(140) !important;
  background-color: rgba(27, 74, 146, 0.8) !important;
  border: 1px solid #316ea9 !important;
  box-shadow: 0 0 px2vh(10) #295993 !important;
  padding: 0 !important;
  border-radius: 0% !important;
}

.warning-box-icon {
  font-size: px2vh(20);
}
.box-row-header {
  height: px2vh(130);
  padding-top: px2vh(70);
}
.box-sex_chart {
  height: px2vh(310);
}
.box-category-chart {
  height: px2vh(250);
}
.box-worker_chart {
  height: px2vh(310);
}
.box-map-chart {
  height: px2vh(500);
}
.box-project-chart {
  height: px2vh(150);
  margin-top: px2vh(20);
}

/*content 结束*/

@keyframes roll-top {
  0% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}
